<template>
	<view class="page-container">
		<view style="border-top: 1px solid #F5F5F5;"></view>
		<view class="padded-15">
			<view class="font-12 text-center padded-b-5">
				<text>以下{{ yhc }}家银行的{{ cpc }}款产品利率更低！</text>
				<text class="color-888888">点击/滑动切换匹配银行</text>
			</view>
			<view class="clearfix padded-10 bg-F6F6F6 border-radius-10">
				<view class="pull-left"  @click="prevSlide">
					<image src="/static/product/left.png" mode="widthFix" style="width: 18px; vertical-align: middle;"></image>
				</view>
				<!-- <view class="pull-left" style="width: calc(100% - 36px);">
					
					<view v-for="(item, index) in cplb" :key="index" class="pull-left text-center" style="width: 33.3333%;">
						<image src="/static/product/zhongguo.png" mode="widthFix" style="width: 25px; vertical-align: middle;"></image>
						<text class="padded-l-5 color-7F7F7F font-16">{{ index }}</text>
					</view>
					
				</view> -->
				<view class="pull-left" style="width: calc(100% - 36px);height: 30px;" >
					<swiper
					  class="custom-swiper"
					  :current="swiper_current" 
					  @change="swiperChange"
					  :display-multiple-items="3"
					>
					  <swiper-item  v-for="(item, index) in cplb" :key="index"  @click="swiperClick(index)">
						  <view class="pull-left text-center" >
							<image src="/static/product/zhongguo.png" mode="widthFix" class="swiper-img" ></image>
							<text class="padded-l-5 color-7F7F7F font-14">{{ index }}</text>
						  </view>
					  </swiper-item>
					</swiper>
				</view>
				<view class="pull-left"  @click="nextSlide">
					<image src="/static/product/right.png" mode="widthFix" style="width: 18px; vertical-align: middle;"></image>
				</view>
			</view>
			<view v-for="(item, index) in cplb" :key="index">
				<view v-if="swiper_selected_current==index"  class="recommend-item padded-15 padded-b-0 margin-t-15">
					<view class="clearfix" >
						<view class="pull-left">
							<image src="/static/product/zhongguo-big.png" mode="widthFix" style="width: 52px;"></image>
						</view>
						<view class="pull-left padded-b-15 padded-l-10" style="width: calc(100% - 52px);">
							<view class="font-12">
								<text class="font-weight-bold">{{ index }}</text>
								<text>- 适配度 {{ item.spd }}%</text>
							</view>
							<view class="font-12 line-height-14">
								<text>适配标签：{{ item.spbq }}</text>
							</view>
						</view>
					</view>
					<view v-for="(val, key) in item.cp" :key="key" class="loan-item">
						<view class="clearfix padded-b-10">
							<view class="pull-left">
								<text class="font-weight-bold font-20">{{ val.cpmc }}</text>
							</view>
							<view class="pull-right">
								
							</view>
						</view>
						<view class="clearfix">
							<view class="pull-left">
								<text class="font-12 color-616161">预估额度</text>
								<text class="font-20 color-3679FF font-weight-bold">￥</text>
								<text class="font-20 color-3679FF font-weight-bold">{{ val.zgeds }}</text>
							</view>
							<view class="pull-right">
								<button class="mini-btn" type="primary" size="mini">立即申请</button>
							</view>
						</view>
						<view class="clearfix color-616161">
							<view class="pull-left font-12">
								<text>最高额度</text>
								<text>￥</text>
								<text>{{ val.zgjes }}</text>
							</view>
							<view class="pull-right font-12">
								<text>年利率:</text>
								<text>{{ val.zxnhll }}(%)</text>
							</view>
						</view>
					</view>
					
					<view v-if="item.wd != ''" class="recommend-item margin-t-10 clearfix ">
						<view class="clearfix recommend-branch-item" >
							<view class="pull-left font-14 font-weight-bold outlets-title">
								推荐网点
							</view>
							<view  class="pull-left font-12">
								<view v-for="(v, k) in item.wd" :key="k" :class="{ 'padded-b-15': item.wd.length > 1 }">
									<view class="font-weight-bold line-height-18 font-14">{{ v.wdname }}</view>
									<view class="line-height-18 color-616161">
										<text>网点电话：</text>
										<text>{{ v.wddh }}</text>
									</view>
									<view class="line-height-18 color-616161">
										<text>网点地址：</text>
										<text>{{ v.wddz }}</text>
									</view>
								</view>
							</view>
							
						</view>
						
						<view class="text-center padded-10 margin-t-15 recommend-bottom-button">
							<text class="font-14">点击联系客户经理了解详细方案</text>
						</view>
						
					</view>
				</view>
			</view>
			
			
			
			
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.getServerData();
			const nhll = options.nhll;
			const dklx = options.dklx;
			if (nhll) {
			    const decodednhll = decodeURIComponent(nhll);
				const decodeddklx = decodeURIComponent(dklx);
			    if (decodednhll) {
					this.getbd(decodednhll,decodeddklx);
			    }
			}
		},
		data() {
			return {
				items: ['个人推荐', '企业推荐'],
				current: 0,
				cplb: [],
				cpc: 0,
				yhc: 0,
				swiper_current:0,
				swiper_selected_current:0,
				swiper_selected_bank_name:'',
			}
		},
		methods: {
			getServerData() {
				this.$request().then(res => {
					// 验证登入
				})
			},
			getbd(nhll,dklx) {
				
				uni.request({
					url: 'https://wn.wdyky.com/index/jrgl/dlltj', 
					method: 'GET',
					data: {
						nhll: nhll, 
						ajax: 1//必须
					},
					success: (res) => {
						if(res.data.code == 1){
							
							if(dklx == 1){
								this.cplb = res.data.grlist.cplb;
								this.cpc = res.data.grlist.cpc;
								this.yhc = res.data.grlist.yhc;
								this.swiper_selected_current=Object.keys(res.data.grlist.cplb)[0];
							} 
							
							if(dklx == 2){
								this.cplb = res.data.qylist.cplb;
								this.cpc = res.data.qylist.cpc;
								this.yhc = res.data.qylist.yhc;
								this.swiper_selected_current=Object.keys(res.data.qylist.cplb)[0];
							} 
						}
					},
					fail: (err) => {
						console.error('GET请求失败：', err);
					}
				});
			},
			prevSlide() {
			    this.swiper_current = Math.max(0,this.swiper_current - 1);
			},
			nextSlide() {
				console.log(this.cplb);
				const length = Object.keys(this.cplb).length;
			    this.swiper_current = Math.min(length - 1,this.swiper_current + 1); 
			},
			swiperClick(index){
				console.log(this.cplb[index])
				console.log(Object.keys(this.cplb)[0]); 
				this.swiper_selected_current=index;
			},
			swiperChange(e) {
				this.swiper_current = e.detail.current; // 更新当前索引
			},
		}
	}
</script>

<style lang="scss">
	@import '@/static/product.scss';
	
	.loan-item {
		padding-top: 15px;
		padding-bottom: 15px;
		border-top: 1px solid #F4F4F4;
	}
	.recommend-branch-item{
		display: flex;
	}
	.outlets-title {
		width: 29px;
		line-height: 14px;
		padding-right: 15px;
		display: flex;
		align-items: center;
	}
	.swiper-img{
		width: 25px; vertical-align: middle;
	}
</style>
